bootstrap select组件

发表于 | 阅读次数：
本文字数： 5.5k | 阅读时长 ≈ 5 分钟

一、组件开源地址以及API说明
bootstrap-select开源地址：https://github.com/silviomoreto/bootstrap-select

bootstrap-select使用示例：http://silviomoreto.github.io/bootstrap-select/examples/

bootstrap-select文档说明：http://silviomoreto.github.io/bootstrap-select/options/

二、组件效果示例
1、引入文件
bootstrap-select给予bootstrap，boostrap又基于jquery，因此需引入如下文件，同时bootstrap-select需用到bootstrap/fonts路径下的图标，因此也需导入该目录。

1
2
3
4
5
6
7
8
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css"/>
<link rel="stylesheet" href="/static/bootstrap/css/bootstrap-select.min.css">

    <!-- Latest compiled and minified JavaScript -->
<script src="/static/jquery-1.12.4.js"></script>
<script src="/static/bootstrap/js/bootstrap.min.js"></script>
<script src="/static/bootstrap/js/bootstrap-select.min.js"></script>

三.基础示例
单选：

1
2
3
4
5
6
7
<select class="selectpicker">
    <option value="1">广东省</option>
    <option value="2">广西省</option>
    <option value="3">福建省</option>
    <option value="4">湖南省</option>
    <option value="5">山东省</option>                            
</select>

多选：
给一个select标签加上selectpicker样式即可。

1
2
3
4
5
6
7
<select class="selectpicker" multiple>
    <option value="1">广东省</option>
    <option value="2">广西省</option>
    <option value="3">福建省</option>
    <option value="4">湖南省</option>
    <option value="5">山东省</option>                            
</select>

四、其他效果示例
选项搜索功能：
增加属性：data-live-search=”true”

1
2
3
4
5
6
7
<select class="selectpicker" multiple data-live-search="true">
    <option value="1">广东省</option>
    <option value="2">广西省</option>
    <option value="3">福建省</option>
    <option value="4">湖南省</option>
    <option value="5">山东省</option>                            
</select>

选项分组

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<select class="form-control selectpicker" data-live-search="true" multiple>
        <optgroup label="广东省">
                <option value="1">广州市</option>
                <option value="2">深圳市</option>
                <option value="3">珠海市</option>
         </optgroup>   
          <optgroup label="广西">
                  <option value="1">南宁市</option>
                  <option value="2">柳州</option>
                  <option value="3">桂林市</option>
           </optgroup>  
           <optgroup label="山东">
                   <option value="1">烟台</option>
                   <option value="2">青岛</option>
                   <option value="3">济南</option>
             </optgroup>                          
</select>

设置最多选项：
data-max-options=”2”

1
2
3
4
5
6
7
<select class="selectpicker" multiple data-live-search="true" data-max-options="2">
    <option value="1">广东省</option>
    <option value="2">广西省</option>
    <option value="3">福建省</option>
    <option value="4">湖南省</option>
    <option value="5">山东省</option>                            
</select>

选项显示为带颜色的标签

1
2
3
4
5
6
 <select class="form-control selectpicker" title="请选择省份" multiple>
                        <option data-content="<span class='label label-success'>广东省</span>">广东省</option>    
                        <option data-content="<span class='label label-info'>广西省</span>">广西省</option>  
                        <option data-content="<span class='label label-warning'>福建省</span>">福建省</option>  
                        <option data-content="<span class='label label-danger'>山东省</span>">山东省</option>                        
</select>

缩略框颜色样式：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<select class="selectpicker" data-style="btn-primary">
  ...
</select>

<select class="selectpicker" data-style="btn-info">
  ...
</select>

<select class="selectpicker" data-style="btn-success">
  ...
</select>

<select class="selectpicker" data-style="btn-warning">
  ...
</select>

<select class="selectpicker" data-style="btn-danger">
  ...
</select>

五、取值赋值：
取值：
关于组件取值保持原生的jquery方法，比如 var value = $(‘#sel’).val(); 这样是不是很简单，需要注意的是，如果是多选，这里得到的value变量是一个数组变量，形如 [‘1’,’2’,’3’]。

赋值

组件赋值就需要稍微变换一下了，如果你直接 $(‘#sel’).val(‘1’); 这样赋值将会无效，正确的赋值方法为：

1
2
$('.selectpicker').selectpicker('val', '1');
$('.selectpicker').selectpicker('val', ['1','2','3']) //多个选项赋值

在一些级联选择的使用场景中，经常需要在赋值的时候顺便触发一下组件的change事件，我们可以这么做。

1
$('.selectpicker').selectpicker('val', '1').trigger("change");

如果是多选的赋值，也是一样:

1
$('.selectpicker').selectpicker('val', ['1','2','3']).trigger("change");

六、组件其他用法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
全选： $('.selectpicker').selectpicker('selectAll'); 

反选： $('.selectpicker').selectpicker('deselectAll'); 

适应手机模式： $('.selectpicker').selectpicker('mobile'); 

组件禁用：

$('.disable-example').prop('disabled', true);
$('.disable-example').selectpicker('refresh');
组件启用：

$('.disable-example').prop('disabled', false);
$('.disable-example').selectpicker('refresh');
组件销毁：

$('.selectpicker').selectpicker('destroy');

以编程方式切换bootstrap-select菜单的打开/关闭。

1
$('.selectpicker').selectpicker('toggle')

以编程方式隐藏bootstrap-select使用hide方法（这仅影响bootstrap-select自身的可见性）。

1
$('.selectpicker')..selectpicker('hide')

本文转载至：JS组件系列——再推荐一款好用的bootstrap-select组件，亲测还不错

手动mark一下，留后用.

补充：
组件操作后刷新：

1
$('.selectpicker').selectpicker('refresh'); //使用JS更新该selectpicker对象的内容后，需用此方法手动刷新探测

select点击按钮（即下拉框展开）事件：

1
$('#business').on('shown.bs.select',function () {} //可使用ajax动态获取option
赏一瓶快乐回宅水吧～
-------------本文结束感谢您的阅读-------------